import React from 'react'
import { Breadcrumb } from 'antd';
import { Button, Checkbox, Form, Input } from 'antd';
import { useEffect, useState } from 'react';
import { Col, Row } from 'antd';
const formItemLayout = {
    labelCol: {
        span: 4,
    },
    wrapperCol: {
        span: 16,
    },
};
const formTailLayout = {
    labelCol: {
        span: 4,
    },
    wrapperCol: {
        span: 20,
        offset: 20,
    },
}
const Dict = () => {
    const [form] = Form.useForm();
    const [checkNick, setCheckNick] = useState(false);
    useEffect(() => {
        form.validateFields(['nickname']);
    }, [checkNick, form]);
    const onCheckboxChange = (e) => {
        setCheckNick(e.target.checked);
    };
    const onCheck = async () => {
        try {
            const values = await form.validateFields();
            console.log('Success:', values);
        } catch (errorInfo) {
            console.log('Failed:', errorInfo);
        }
    };
    return (
        <div>
            <Breadcrumb>
                <Breadcrumb.Item>Home</Breadcrumb.Item>
                <Breadcrumb.Item>
                    <a href="">Application Center</a>
                </Breadcrumb.Item>
                <Breadcrumb.Item>
                    <a href="">Application List</a>
                </Breadcrumb.Item>
                <Breadcrumb.Item>An Application</Breadcrumb.Item>
            </Breadcrumb>
            <Form form={form} name="dynamic_rule">
                <Row>
                    <Col span={8}>
                    <Form.Item
                            {...formItemLayout}
                            name="nickname"
                            label="Nickname"
                            rules={[
                                {
                                    required: checkNick,
                                    message: 'Please input your nickname',
                                },
                            ]}
                        >
                            <Input placeholder="Please input your nickname" />
                        </Form.Item>
                    </Col>
                    <Col span={8}>

                        <Form.Item
                            {...formItemLayout}
                            name="nickname"
                            label="Nickname"
                            rules={[
                                {
                                    required: checkNick,
                                    message: 'Please input your nickname',
                                },
                            ]}
                        >
                            <Input placeholder="Please input your nickname" />
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item
                            {...formItemLayout}
                            name="nickname"
                            label="Nickname"
                            rules={[
                                {
                                    required: checkNick,
                                    message: 'Please input your nickname',
                                },
                            ]}
                        >
                            <Input placeholder="Please input your nickname" />
                        </Form.Item>
                    </Col>
                </Row>
                <Row>
                    <Col span={8}>
                        <Form.Item
                            {...formItemLayout}
                            name="nickname"
                            label="Nickname"
                            rules={[
                                {
                                    required: checkNick,
                                    message: 'Please input your nickname',
                                },
                            ]}
                        >
                            <Input placeholder="Please input your nickname" />
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item {...formTailLayout}>
                            <Button type="primary" onClick={onCheck}>
                                Check
                            </Button>
                        </Form.Item>
                    </Col>
                </Row>






            </Form>



        </div>
    )
}

export default Dict